import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:pet/app/widgets/NoShadowScrollBehavior.dart';
import 'package:pet/app/widgets/custom_avatar.dart';
import 'package:pet/app/widgets/loading.dart';

import '../../../contants/my_colors.dart';
import '../../../helper.dart';
import '../../../models/clients.dart';
import '../../../routes/app_pages.dart';
import '../../../websocket_controller.dart';
import '../../../widgets/breathe.dart';
import '../controllers/history_controller.dart';

import 'package:pull_to_refresh/pull_to_refresh.dart';

class HistoryView extends GetView<HistoryController> {
  HistoryView({Key? key}) : super(key: key);

  HistoryController historyController = Get.find<HistoryController>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '已结束',
          style: TextStyle(fontSize: 16, color: Colors.white),
        ),
        backgroundColor: MyColors.secondaryDark,
        centerTitle: true,
        toolbarHeight: 50,
        elevation: 1,
        actions: const [Breathe()],
      ),
      backgroundColor: MyColors.dark,
      body: GetBuilder<WebsocketController>(
        init: WebsocketController(),
        autoRemove: false,
        builder: (controller) {
          return Stack(
            children: [
              !controller.isConnect ? const Loading() : const SizedBox(),
              SmartRefresher(
                enablePullDown: true,
                enablePullUp: true,
                header: const WaterDropMaterialHeader(
                  backgroundColor: Colors.white,
                  color: Colors.black,
                ),
                controller: controller.refreshController,
                footer: CustomFooter(
                  builder: (context, mode) {
                    Widget body;
                    if (mode == LoadStatus.idle) {
                      body = const Text(
                        "上拉加载",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                        ),
                      );
                    } else if (mode == LoadStatus.loading) {
                      body = const Loading();
                    } else if (mode == LoadStatus.failed) {
                      body = const Text(
                        "加载失败！点击重试！",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                        ),
                      );
                    } else if (mode == LoadStatus.canLoading) {
                      body = const Text(
                        "松手,加载更多!",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                        ),
                      );
                    } else {
                      body = const Text(
                        "没有更多数据了!",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                        ),
                      );
                    }
                    return Container(
                      height: 55.0,
                      child: Center(child: body),
                    );
                  },
                ),
                onRefresh: () {
                  print('onRefresh');
                  controller.getHistoryClients();
                },
                onLoading: () {
                  print('onLoading');
                  controller.loadMoreHistoryClients();
                },
                child: ListView.builder(
                  // scrollDirection: Axis.vertical,
                  // shrinkWrap: true,
                  itemCount: controller.historyClients.length,
                  itemBuilder: (BuildContext context, int index) {
                    String itemKey =
                        controller.historyClients.keys.elementAt(index);

                    Clients client = controller.historyClients[itemKey]!;

                    return GestureDetector(
                      onTap: () {
                        Get.toNamed(Routes.CHAT, arguments: {
                          "id": client.id,
                          "sendId": client.sendId,
                          "nickname": client.sendNickname,
                          "avatar": client.sendHeadPortrait,
                          "type": "offline"
                        });
                      },
                      child: Row(
                        children: [
                          Container(
                            width: Get.width,
                            decoration: const BoxDecoration(
                              border: Border(
                                bottom: BorderSide(color: Colors.white),
                              ),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Container(
                                      padding: const EdgeInsets.only(
                                        top: 6,
                                        bottom: 6,
                                        left: 6,
                                        right: 6,
                                      ),
                                      child: Stack(
                                        children: [
                                          CustomAvatar(
                                            avatar: client.sendHeadPortrait,
                                            showWave: false,
                                          ),
                                          client.unread != 0
                                              ? Positioned(
                                                  top: 4,
                                                  right: 0,
                                                  child: Container(
                                                    height: 16,
                                                    width: 16,
                                                    decoration: BoxDecoration(
                                                      color:
                                                          const Color.fromARGB(
                                                              255, 0, 0, 0),
                                                      borderRadius:
                                                          const BorderRadius
                                                              .all(
                                                        Radius.circular(60),
                                                      ),
                                                      border: Border.all(
                                                        color: Colors.white,
                                                      ),
                                                    ),
                                                    child: Center(
                                                      child: Text(
                                                        client.unread
                                                            .toString(),
                                                        style: const TextStyle(
                                                          color: Colors.white,
                                                          fontSize: 10,
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                )
                                              : Container(),
                                        ],
                                      ),
                                    ),
                                    Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          client.sendNickname,
                                          style: const TextStyle(
                                            color: Colors.white,
                                          ),
                                        ),
                                        const SizedBox(
                                          height: 10,
                                        ),
                                        SizedBox(
                                          width: 100,
                                          child: Text(
                                            client.latestText,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                              color: Colors.white,
                                              fontSize: 14,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                                Column(
                                  children: [
                                    Container(
                                      margin: const EdgeInsets.all(20),
                                      child: Text(
                                        formatTimestamp(
                                            int.parse(client.updatedAt)),
                                        style: const TextStyle(
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
